<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10400404") }}
    </PageTitle>
    <!-- body -->
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            maxlength="32"
            v-model="dataForm.name"
            @blur="() => (dataForm.name = dataForm.name.trim())"
            :placeholder="$t('developer.name')"
            clearable
            @clear="getDataList((pageNo = 1))"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            clearable
            :placeholder="$t('developer.status')"
          >
            <el-option
              v-for="item in statusArray"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.developerType"
            clearable
            :placeholder="$t('developer.developerType')"
          >
            <el-option
              v-for="item in typeArray"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="w-8" type="primary" @click="getDataList((pageNo = 1))">
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>

        <el-form-item style="float: right">
          <el-button class="w-8" type="primary">
            <table-column-filter
              :list="settingList"
              :default-setting="defaultSettings"
              v-model:settings="settings"
              domain="developer.list"
            />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" v-loading="dataListLoading" stripe>
        <el-table-column key="name" prop="name" :label="$t('developer.name')">
          <template v-slot="scope">
            <div @click="handleDetail(scope.row)">
              <label
                v-if="scope.row.developerType === 1"
                type="text"
                class="cursor-pointer"
                >{{ scope.row.contactName }}</label
              >
              <label
                v-if="scope.row.developerType === 2"
                type="text"
                class="cursor-pointer"
                >{{ scope.row.firstName }}</label
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="developerType" :label="$t('developer.developerType')">
          <template v-slot="scope">
            <el-tag type="text" size="small" v-if="scope.row.developerType === 1">
              {{ $t("developer.developer_type_list.personal") }}
            </el-tag>
            <el-tag type="text" size="small" v-if="scope.row.developerType === 2">
              {{ $t("developer.developer_type_list.company") }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('pidType')"
          key="pidType"
          prop="pidType"
          :label="$t('developer.pidType')"
        >
          <template v-slot="scope">
            <el-tag
              type="text"
              size="small"
              v-if="scope.row.developerType === 1 && scope.row.pidType"
            >
              {{
                scope.row.pidType === 1
                  ? $t("developer.id_card")
                  : scope.row.pidType === 2
                  ? $t("developer.passport")
                  : $t("developer.unknown")
              }}
            </el-tag>
            <el-tag
              type="text"
              size="small"
              v-if="scope.row.developerType === 2 && scope.row.pidType"
            >
              {{ $t("developer.business_license") }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('pidNo')"
          key="pidNo"
          prop="pidNo"
          :label="$t('developer.pidNo')"
        >
        </el-table-column>
        <el-table-column
          v-if="showHeader('email')"
          prop="email"
          key="email"
          :label="$t('developer.email')"
        >
        </el-table-column>
        <el-table-column prop="status" min-width="100" :label="$t('developer.status')">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 2" size="small" type="warning">
              {{ statusFilter(scope.row.status) }}
            </el-tag>
            <el-tag v-if="scope.row.status === 1" size="small" type="success">
              {{ statusFilter(scope.row.status) }}
            </el-tag>
            <el-tag
              v-if="scope.row.status === 5 || scope.row.status === 7"
              size="small"
              type="info"
            >
              {{ statusFilter(scope.row.status) }}
            </el-tag>
            <el-tag
              v-if="
                scope.row.status === 0 || scope.row.status === 3 || scope.row.status === 8
              "
              size="small"
              type="danger"
            >
              {{ statusFilter(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('creTime')"
          prop="creTime"
          min-width="100"
          :label="$t('developer.creTime')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? "" : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('remark')"
          key="remark"
          prop="remark"
          min-width="100"
          :label="$t('contact.remark')"
        />
        <el-table-column
          v-if="showHeader('rejectionReason')"
          prop="rejectionReason"
          key="rejectionReason"
          min-width="100"
          :label="$t('common.reject_reason')"
        />
        <!-- <el-table-column width="95px">
          <template v-slot="scope">
            <el-dropdown
              @command="
                (command) => {
                  handleDevCommand(command, scope.row)
                }
              "
            >
              <span class="el-dropdown-link">
                <svg-icon icon-class="menu" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="info">
                    <span class="text-center">
                      {{ $t('developer.operate_detail') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="examine"
                    v-if="scope.row.status === 5 && isAuth('10400404.MANAGE')"
                  >
                    <span class="text-center">
                      {{ $t('developer.area_examine') }}
                    </span>
                  </el-dropdown-item>
                </el-dropdown-menu></template
              >
            </el-dropdown>
          </template>
        </el-table-column> -->
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleDetail(scope.row)">
                    {{ $t("common.detail") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="scope.row.status === 5 && isAuth('10400404.MANAGE')"
                    command="examine"
                  >
                    {{ $t("developer.area_examine") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      v-model="checkDeveloperVisible"
      :title="$t('developer.area_examine')"
      width="800px"
      @close="cancel"
    >
      <el-form
        ref="checkForm"
        :model="checkForm"
        label-position="top"
        :rules="checkRules"
      >
        <el-form-item :label="$t('developer.name')" prop="name">
          <el-input v-model="checkForm.name" disabled show-word-limit clearable />
        </el-form-item>
        <el-form-item
          :label="$t('developer.assist_result') + ':'"
          prop="areaExamineResult"
        >
          <el-radio-group v-model="checkForm.areaExamineResult">
            <el-radio :label="1">{{
              $t("developer.assist_result_type.approved")
            }}</el-radio>
            <el-radio :label="2">{{
              $t("developer.assist_result_type.reject")
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-show="this.checkForm.areaExamineResult === 1"
          :label="$t('common.remark')"
          prop="remark"
        >
          <el-input
            v-model="checkForm.remark"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            maxlength="256"
            show-word-limit
            clearable
            @blur="() => (checkForm.remark = checkForm.remark.trim())"
          />
        </el-form-item>
        <el-form-item
          v-show="this.checkForm.areaExamineResult === 2"
          :label="$t('common.reject_reason')"
          prop="rejectionReason"
        >
          <el-input
            v-model="checkForm.rejectionReason"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            maxlength="256"
            show-word-limit
            clearable
            @blur="() => (checkForm.rejectionReason = checkForm.rejectionReason.trim())"
          />
        </el-form-item> </el-form
      ><template #footer>
        <span class="dialog-footer">
          <el-button text @click="cancel">{{ $t("common.cancel") }}</el-button>
          <el-button type="primary" :loading="isDisabled" @click="submit()">{{
            $t("common.confirm")
          }}</el-button>
        </span></template
      >
    </el-dialog>
  </div>
</template>

<script>
import TableColumnFilter from "@/components/page-setting/table-column-filter";
import { timeFilter, dateFilter } from "@/filters/index";
import { formatDate } from "@/utils/formatDate";
import { developerAreaExamine, developerListByCountry } from "@/api/developer";
import { isAuth } from "@/utils";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  components: {
    TableColumnFilter,
    PageTitle,
  },
  data() {
    const validRemark = function (rule, remark, cb) {
      if (this.checkForm.areaExamineResult === 2 && !this.checkForm.rejectionReason) {
        cb(new Error(this.$t("developer.error_tip.reject_remark")));
      } else {
        cb();
      }
    };
    return {
      settings: {
        conditions: [],
        columns: [],
      },
      dataForm: {
        name: "",
        developerType: null,
        status: null,
      },
      checkForm: {
        name: "",
        remark: "",
        rejectionReason: "",
        areaExamineResult: 1,
        developerId: "",
      },
      isDisabled: false,
      checkDeveloperVisible: false,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false,
      checkRules: {
        rejectionReason: [{ validator: validRemark.bind(this) }],
      },
    };
  },
  mounted() {
    this.getDataList();
  },
  computed: {
    statusArray() {
      return [
        { label: this.$t("developer.status_list.locked"), value: 0 },
        { label: this.$t("developer.status_list.normal"), value: 1 },
        { label: this.$t("developer.status_list.pending_review"), value: 2 },
        { label: this.$t("developer.status_list.rejected"), value: 3 },
        { label: this.$t("developer.status_list.country_examine"), value: 5 },
        { label: this.$t("developer.status_list.cert_examine"), value: 7 },
        { label: this.$t("developer.status_list.logged_off"), value: 8 },
      ];
    },
    typeArray() {
      return [
        { label: this.$t("developer.developer_type_list.personal"), value: 1 },
        { label: this.$t("developer.developer_type_list.company"), value: 2 },
      ];
    },
    settingList() {
      return {
        columns: [
          {
            title: this.$t("developer.pidType"),
            code: "pidType",
          },
          {
            title: this.$t("contact.remark"),
            code: "remark",
          },
          {
            title: this.$t("common.reject_reason"),
            code: "rejectionReason",
          },
          {
            title: this.$t("developer.pidNo"),
            code: "pidNo",
          },
          {
            title: this.$t("developer.email"),
            code: "email",
          },
          {
            title: this.$t("developer.creTime"),
            code: "creTime",
          },
        ],
      };
    },
    defaultSettings() {
      return {
        columns: [
          "email",
          "remark",
          // this.$t('common.online'),
        ],
      };
    },
  },
  methods: {
    timeFilter,
    dateFilter,
    statusFilter(status) {
      const statusMap = {
        0: this.$t("developer.status_list.locked"),
        1: this.$t("developer.status_list.normal"),
        2: this.$t("developer.status_list.pending_review"),
        3: this.$t("developer.status_list.rejected"),
        5: this.$t("developer.status_list.country_examine"),
        7: this.$t("developer.status_list.cert_examine"),
        8: this.$t("developer.status_list.logged_off"),
      };
      return statusMap[status];
    },
    handleDevCommand(command, data) {
      if (command === "info") {
        this.handleDetail(data);
      } else if (command === "examine") {
        this.checkForm.developerId = data.developerId;
        this.checkForm.remark = data.remark;
        this.checkForm.rejectionReason = data.rejectionReason;
        if (data.developerType === 1) {
          this.checkForm.name = data.contactName;
        } else {
          this.checkForm.name = data.firstName;
        }
        this.checkDeveloperVisible = true;
      }
    },
    handleDetail(data) {
      localStorage.setItem("developer-info", JSON.stringify(data));
      this.$router.push({
        path: `/developer/developer-detail/${data.developerId}`,
      });
    },
    showHeader(label) {
      var list = this.settings["columns"];
      return list ? list.includes(label) : false;
    },
    showFormItem(label) {
      var list = this.settings["conditions"];
      return list ? list.includes(label) : false;
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        developerType: this.dataForm.developerType,
        status: this.dataForm.status,
        name: this.dataForm.name,
      };
      developerListByCountry(params)
        .then((data) => {
          this.dataList = data.data;
          this.rows = data.rows;
          this.dataListLoading = false;
        })
        .catch((e) => {
          // this.$message.error(e.message)
          this.dataListLoading = false;
          console.log(`err:${JSON.stringify(e)}`);
        });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getDataList();
    },
    formatDate(cellValue, fmt) {
      return formatDate(cellValue, fmt);
    },
    cancel() {
      this.$refs["checkForm"].resetFields();
      this.checkForm.rejectionReason = "";
      this.checkForm.remark = "";
      this.checkDeveloperVisible = false;
    },
    submit() {
      this.$refs["checkForm"].validate((valid) => {
        if (valid) {
          this.isDisabled = true;
          let zForm = {
            developerId: this.checkForm.developerId,
            areaExamineResult: this.checkForm.areaExamineResult,
          };
          console.log(zForm);
          if (this.checkForm.areaExamineResult === 1) {
            zForm.remark = this.checkForm.remark;
          } else {
            zForm.rejectionReason = this.checkForm.rejectionReason;
          }

          developerAreaExamine(zForm)
            .then((data) => {
              if (data) {
                this.$message.success(this.$t("common.operate_success"));
                this.getDataList();
                this.checkDeveloperVisible = false;
                this.isDisabled = false;
                this.checkForm = {
                  name: "",
                  remark: "",
                  rejectionReason: "",
                  areaExamineResult: 1,
                  developerId: "",
                };
              }
            })
            .catch((e) => {
              this.$confirmError(e);
              this.isDisabled = false;
            });
        }
      });
    },
    isAuth,
  },
};
</script>
<style lang="scss" scoped></style>
